| Vue+ELEMENT | 您所在的位置：网站首页 › intouch 图库怎么根据不同状态变换不同颜色 › Vue+ELEMENT |
Vue+ELEMENT
|
Vue+ELEMENT-UI按钮根据后台返回的状态值进行动态的颜色渲染，是否禁用和按钮名称的改变
有个需求，对接货单号的操作。 新建接单完成后单子的状态会变成"待接货"状态，再次进行点击。进入接货单，点击确认接货按钮，此时颜色为蓝色，然后返回。列表状态变成"确认接货"。点击单号进入详情，按钮变为灰色禁用，值变为了"已接货"。下面是具体实现代码 telmplete里的html代码 {{editBtn}} data() { return { // preScope: this.$route.query.data, deviceScope: {}, form: {}, editBtn: '', btnColor: '', deviceDetails: [], deviceDetailLists: {}, multipleSelection: [] } },重点是editBtn,btnColor这两个属性，以及标签里的:disabled=“isAble” ，{{editBtn}},:type="btnColor"对按钮的值和颜色的控制,原理双向数据绑定。 editBtn: ‘’, btnColor: '' 当vue实例在created阶段，调用接口，对以上几个标签和两个属性进行操作。 created(){ this.form = this.$route.query.data console.log(this.form) if (this.form.statusValue === '确认接货') { this.isAble = true; // 注意true是不可用 this.editBtn = '已接货' this.btnColor = 'info' } else if (this.form.statusValue === '待接货' || this.form.statusValue === '拼单-待接货'){ this.isAble = false; //可用 this.editBtn = '确认接货' this.btnColor = 'primary' } }从上一页面拿到传递的数据进行判断，动态赋值，动态改变按钮类型。 具体效果
|
【本文地址】
公司简介
联系我们